<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/purchaselist.css" />
</head>

<body class="fixed-left">
	<div class="enlarged forced" id="wrapper">
		<div class="content-page crm" style="margin: 0;padding: 0">
			<div class="content" style="margin: 0;padding: 0">
				<div class="container-fluid">
					<div class="row">

						<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
							<!----------------筛选、查询input代码开始-------------------->
							<!--第二种       精细查询搜索框  -->
							 <div id="search" style="margin-top:10px;">
								<div style="height: 50px;"
									id="app">
									<a class="btn" style="float:left;"><i class="fa fa-cubes"></i></a>
									<el-select style="width:120px;float:left;" slot="prepend" clearable placeholder="全部数据" v-model="ruleForm.selects">
										<el-option label="新采购" value="3185"></el-option>
										<el-option label="生成入库单" value="3186"></el-option>
										<el-option label="入库完成" value="3188"></el-option>
										</el-select>
									<el-input placeholder="供应商名称" v-model="ruleForm.supname" style="width:150px;float:left;margin-left:20px;" class="input-with-select">
									</el-input>	
									
									<el-input placeholder="采购主题" v-model="ruleForm.theme" style="width:200px;float:left;margin-left:20px;" class="input-with-select">
									</el-input>
									
									<el-button slot="append" icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>
								</div>
							
							</div> 
							<!----------------列表-------------------->
							<div id="qlist" style="z-index: 0">
									<div class="row m-t-15 f-s-12" style="height: 35px;">
										<div class="col-sm-6">
											<span set-lan="html:采购单">采购单</span>
										</div>
										<div class="col-sm-6 text-right">
											<el-button class="btn btn-white "
											 :plain="true" @click="showDialog()">
											<i class="el-icon-circle-plus"></i>新建
										</el-button>
										<el-dialog :visible.sync="centerDialogVisible"
										width="900px" center> <iframe src="/purchaseAdd"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
										this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
											&nbsp;
											<button class="btn btn-white btn-custom f-s-12"
												id="btn_list_fields">
												<i class="fa fa-th"></i>
											</button>
										</div>
									</div>

									<div class="tab-content p-0">
										<div class="bootstrap-table m-t-10">
											<div class="fixed-table-container overflow-x-auto">
												<table class="table table-bordered table-hover table-z"
													id="qlist_table">
													<thead>
														<tr>
															<th class="bs-checkbox" style="width: 36px;">
																<div class="th-inner">
																	<input name="selcon"
																		onclick='setQlistChk("formedit_qlist",this.checked);'
																		type="checkbox" data-parsley-multiple="selcon">
																</div>
																<div class="fht-cell"></div>
															</th>

															<th class="th-inner">
																<p>
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:ID">ID</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='title'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:采购主题">采购主题</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='cu_id'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:供应商(客户)">供应商(客户)</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='date'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:采购日期">采购日期</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='money'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:金额">金额</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='backsum'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:已付金额">已付金额</a>
																</p>
															</th>
															<th class="th-inner">
																<p>
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='lib'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:仓库">仓库</a>
																</p>
															</th>
															
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='who'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:经手人">经手人</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='type'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:分类">分类</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na"
																		href="JavaScript:qlist_argv_orderf='status'; qlist_argv_orderv=0;qlist_load();"
																		set-lan="html:状态">状态</a>
																</p>
															</th>
															<th class="th-inner">
															<p>
																<a class="na" style="color: black; margin-left: 10px;">操作</a>
															</p>
														</th>
														</tr>
													</thead>
													<tbody class="bg-white">

														<tr v-for="(list,i) in tableData" :v-model="tableData">
															<td><input name="sel_id[]" type="checkbox"
																value="50" data-parsley-multiple="sel_id"></td>
															<td>
																<p>{{list.schno}}</p>
															</td>
															<td>
																<p align="left">
																	<a id="qlist_F50"
																		:href="'/purchasedesc?id='+list.schno"><i
																		class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{list.theme}}</a>
																</p>
															</td>
															<td>
																<p align="left">
																	<span style="font-weight: normal; color: #9e9e9e">〖</span>{{list.supname}}
																	<a
																		href="javascript:vopen('/xcrm/customer/customer/detail.xt?id=2057','customer2057',999,600);"><i
																		class="fa fa-folder-open m-l-5"
																		data-original-title="打开详细页面" data-toggle="tooltip"
																		data-placement="bottom"></i></a><span
																		style="font-weight: normal; color: #9e9e9e">〗</span>
																</p>
															</td>
															
															<td>
																<p align="left">{{dateFormat(list.schtime)}}</p>
															</td>
															<td>
																<p align="right">
																	<span style="white-space: nowrap"><span
																		style="font-size: 9pt; font-weight: normal;">￥</span>{{list.schsum}}</span>
																</p>
															</td>
															<td>
																<p align="right">
																	<span style="white-space: nowrap"><span
																		style="font-size: 9pt; font-weight: normal;">￥</span>{{list.payed}}</span>
																</p>
															</td>
															<td>
																<p>{{list.dgsname}}</p>
															</td>
															
															<td>
																<p align="left">{{list.use_name}}</p>
															</td>
															<td>
																<p align="left">{{list.sctype}}</p>
															</td>
															<td>
																<p align="left">{{list.schstates}}</p>
															</td>
															<td width="1%" nowrap="">
															<div v-if="list.schstates==='新采购'">
															<a title="删除"  @click="delgood(list.schno)"
																data-placement="bottom"><i
																	class="fa fa-trash-o m-r-5"></i></a>&nbsp; 
																	<a title="明细" :href="'/purchasedesc?id='+list.schno"
																><i class="fa fa-list m-r-5"></i></a>&nbsp;
																<a title="生成入库单"  @click="delgood2(list.schno)"><i
																	class="fa fa-level-down m-r-5"></i></a>&nbsp; 
															</div>
															<div v-else style="display:none">
															<a title="删除"  @click="delgood(list.schno)"
																data-placement="bottom"><i
																	class="fa fa-trash-o m-r-5"></i></a>&nbsp; 
																	<a title="明细" :href="'/purchasedesc?id='+list.schno"
																><i class="fa fa-list m-r-5"></i></a>&nbsp;
																<a title="生成入库单"  @click="delgood2(list.schno)"><i
																	class="fa fa-level-down m-r-5"></i></a>&nbsp; 
																	
															</div>
																</td>
														</tr>
													</tbody>
												</table>
												<el-dialog title="提示" :visible.sync="dialogVisible"
																			width="30%"> <span>您确认要删除此记录吗？</span> <span
																			slot="footer" class="dialog-footer"> <el-button
																				@click="dialogVisible = false">取 消</el-button> <el-button
																				type="primary" @click="update(schno)">确
																			定</el-button>

																		</span> </el-dialog>
																		
																		<el-dialog title="提示" :visible.sync="dialogVisible2"
																			width="30%"> <span>您确认要生成入库单吗？</span> <span
																			slot="footer" class="dialog-footer"> <el-button
																				@click="dialogVisible2 = false">取 消</el-button> <el-button
																				type="primary" @click="update2(schno)">确
																			定</el-button>

																		</span> </el-dialog>
												
											</div>
										</div>
										<div class="row m-t-10">
										<div class="col-sm-3">
											<input name="sel_type" type="hidden" value="0"> <a
												title="删除"><button
													class="btn btn-white btn-custom waves-effect waves-light"
													onclick="if (confirm('确认删除选中数据及其视图下关联数据吗？')) { $('form[name=formedit_qlist]').find('input[name=sel_type]').val('0').end().submit();};return  false;"
													data-original-title="删除" data-toggle="tooltip"
													data-placement="bottom">
													<i class="el-icon-delete"></i>
												</button></a> &nbsp; <a title="批量编辑"><button
													class="btn btn-white btn-custom waves-effect">
													<i class="el-icon-edit"></i>
												</button></a>
										</div>
										<div class="col-sm-7">
									<el-pagination @size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="ruleForm.currentPage"
										:page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize"
										layout="total, prev, pager, next, jumper"
										:total="ruleForm.totalCount"> </el-pagination>
								</div>
										<div class="col-sm-2 text-right">
											<!-- BEGIN qqhide -->
											<a title="打印列表" class="btn btn-white btn-custom waves-light"
												href="/system/runmod_print.xt?where=&amp;bwhere=&amp;page=&amp;orderf=&amp;orderv=&amp;pn=&amp;customer_phone_show=0&amp;sid=95&amp;ssn=eqtbhnjoofkukakh9srptfb8c5&amp;ccn=d002&amp;cr=3f45cc49f1d751bb552284054948516d&amp;ma=caec64c353ff1fff4813f3df05349b00&amp;scname=memday&amp;comname=qlist&amp;modcr=d0916b6105e2b6463742e2befb050fdc&amp;customer_phone_show=0&amp;cv=,search,qlist,&amp;qlist_print=1"
												target="_blank" data-original-title="打印列表"
												data-toggle="tooltip" data-placement="bottom"> <i
												class="el-icon-printer"></i></a> <a
												title="导出Excel权限"
												class="btn btn-white btn-custom  waves-effect waves-light"
												href="/setup/setup.xt?func=s_table&amp;dt=memday"
												target="_blank" data-toggle="tooltip"
												data-placement="bottom"><i
												class="el-icon-setting"></i></a>&nbsp;
											<a
												class="btn btn-white easyui-linkbutton" onclick="downloadfile();"
												title="导出Excel格式数据">
												<i class="el-icon-document"></i>
											</a>
											<!-- END qqhide -->
										</div>
									</div>
									</div>
							</div>


							<!----------------统计-------------------->
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible4:false,
							dialogVisible:false,
							dialogVisible2:false,
							FrameSrc:"",
							//表格当前页数据
			                tableData: [],
			                
							ruleForm: {
								//搜索框
								supname: '',
								theme:'',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize: 10,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: '',
				               
						        },
						        schno:''
						}
					},
					methods: {
						showDialog(){
					    	  this.centerDialogVisible= true;
					      },
					      
					      delgood:function(schno){
								this.schno= schno;
						    	this.dialogVisible = true;
									
						      },
						      update: function(i) {
						    	  axios.post("/delpurchase",
						           			//参数转换
						           			Qs.stringify({'schno':i},{arrayFormat: 'brackets'})
						           			//ajax请求成功的回调函数
						           			).then(function(v){
							           			window.location.replace("/purchaseList");
							           			console.log("回调成功，获取了服务器端返回的值v");
							           	}).catch(function(e){
							           		alert("出错了"+e);
							           	});
								},
								
								//生成入库单
								delgood2:function(schno){
									this.schno= schno;
							    	this.dialogVisible2 = true;
										
							      },
							      update2: function(i) {
							    	  axios.post("/updateform",
							           			//参数转换
							           			Qs.stringify({'id':i},{arrayFormat: 'brackets'})
							           			//ajax请求成功的回调函数
							           			).then(function(v){
								           			window.location.replace("/purchaseList");
								           			console.log("回调成功，获取了服务器端返回的值v");
								           	}).catch(function(e){
								           		alert("出错了"+e);
								           	});
									},
					      
					      
					      
						//从服务器读取数据
		                loadData: function(){  
		                	
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/purlist",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data.list;
								iosnn.ruleForm.totalCount = v.data.total;
								 console.info(v.data); 
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
		                handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },
					 //   时间格式化
				         	dateFormat:function(time) {
								    var date=new Date(time);
								    var year=date.getFullYear();
								    /* 在日期格式中，月份是从0开始的，因此要加0
								     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
								     * */
								    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
								    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
								    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
								    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
								    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
								    // 拼接
								  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
								    return year+"-"+month+"-"+day;
								},

					      
						submitForm(formName) {
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData();
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						}
						 
					},
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/purchaseList",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data.list;
							iosnn.ruleForm.totalCount = v.data.total;
							console.info(iosnn.tableData);
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}
					
				});
			</script>
	
</body>

</html>